<template>
	<view class="page">
		<view class="flex benben-position-layout flex flex-wrap align-center personalInformation_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub personalInformation_fd0_0'>
				<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  personalInformation_fd0_0_c0_c0' @tap.stop="handleJumpDiy"
						data-type="back" data-url="1">&#xE794;</text>
				</view>
				<text class='personalInformation_fd0_0_c1'>确认订单</text>
				<view class='flex flex-wrap align-center personalInformation_fd0_0_c2'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		
		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#1A66FA"></u-loading>
			<view>加载中</view>
		</view>
		<template v-else>
			<view class="page_content">
				<view class="card_no flex align-center justify-between">
					<view class="card_no_text flex align-center">
						<text>{{carInfo.car_number}}</text>
						<!-- <image class="order_source" :src='STATIC_URL+"460.png"' mode="aspectFill"></image> -->
						<view class="ota_name flex align-center justify-center" v-if="otaName">
							<text class="ota_name_text">{{otaName == "管家端" ? "管家" : otaName}}</text>
						</view>
					</view>
				</view>
				<view class="label_info flex align-center justify-between">
					<view class="label_list">
						<view class="label_item flex align-center justify-center">{{carInfo.brand_name}}</view>
					</view>
					<view class="price_le flex align-center">
						<text class="price_le_1">总价：</text>
						<text class="price_le_2">¥</text>
						<text class="price_le_3">{{ Number(totalPrice) }}</text>
						<!-- <text class="price_le_3">{{ totalPrice | frontPrice }}</text>
						<text class="price_le_4">{{ totalPrice | laterPrice }}</text> -->
					</view>
				</view>
				<view class="order_date flex align-center justify-between" @tap.stop="handleJumpDiy" data-type="navigateTo" :data-url="`/pages/index/selectVehicle/selectTime`">
					<view class="date_item">
						<view class="date_item_1">{{timeData.toDay_time}} {{timeData.week}}</view>
						<view class="date_item_2">{{timeData.toDay_month}}</view>
					</view>
					<view class="date_ce">
						<image class="date_ce_1" :src='STATIC_URL+"467.png"' mode="aspectFill"></image>
						<view class="date_ce_2">
							<text v-if="timeData.dayNum > 0">{{timeData.dayNum}}天</text>
							<text v-if="timeData.dayHours > 0">{{timeData.dayHours}}小时</text>
						</view>
					</view>
					<view class="date_item" style="text-align: right;">
						<view class="date_item_1">{{timeData.twoDay_time}} {{timeData.twoWeek}}</view>
						<view class="date_item_2">{{timeData.twoDay_month}}</view>
					</view>
				</view>
				<view class="reserve_info">
					<view class="reserve_item">
						<text>到店取车：</text>
						<text>{{carInfo.store_name}}</text>
					</view>
					<view class="reserve_item" style="margin-top: 14rpx;">
						<text>预定时间：</text>
						<text>{{timeData.toDay}}</text>
					</view>
				</view>
				<view class="content_bg">
					<view class="infor_item flex align-center justify-between">
						<view class="infor_item_le">订单明细</view>
						<!-- <view class="infor_item_ri_2">价格日历</view> -->
					</view>
					<view class="infor_item flex align-center justify-between">
						<view class="infor_item_le_1">基本租金</view>
						<view class="infor_item_ri_1">￥{{Number(carInfo.base_price)}}</view>
					</view>
					<view class="infor_item flex align-center justify-between">
						<view class="infor_item_le_1">{{insureItem.name}}</view>
						<view class="infor_item_ri_1">￥{{Number(carInfo.insurance_money)}}</view>
					</view>
					<view class="infor_item flex align-center justify-between" v-if="changeInsure">
						<view class="infor_item_le_1">{{changeInsure.name}}</view>
						<view class="infor_item_ri_1">￥{{Number(carInfo.insure_plus_money)}}</view>
					</view>
					<view class="infor_item flex align-center justify-between" v-if="carInfo.new_person_price > 0">
						<view class="infor_item_le_1">新人优惠</view>
						<view class="infor_item_ri_1">-￥{{carInfo.new_person_price}}</view>
					</view>
					<!-- <view class="infor_item flex align-center justify-between">
						<view class="infor_item_le_1 flex align-center">
							<text>基本保障服务费</text>
							<image class="infor_item_icon" :src='STATIC_URL+"469.png"' mode="aspectFill"></image>
						</view>
						<view class="infor_item_ri_1">￥420</view>
					</view> -->
					<view class="preferential no_line flex align-center justify-between">
						<view class="preferential_le"></view>
						<view class="preferential_ri">
							<text>合计：</text>
							<text>￥{{Number(totalPrice)}}</text>
						</view>
					</view>
				</view>
				<view class="content_bg">
					<view class="infor_item no_line flex align-center justify-between">
						<view class="infor_item_le">会员信息</view>
					</view>
					<view class="id_card flex align-center">
						<text class="id_card_1" v-if="user_info.is_auth == 0">昵称：</text>
						<text class="id_card_1" v-else>姓名：</text>
						<text class="id_card_2" v-if="user_info.is_auth == 0">{{user_info.nickname}}</text>
						<text class="id_card_2" v-else>{{user_info.username}}</text>
					</view>
					<view class="id_card flex align-center">
						<text class="id_card_1">手机号：</text>
						<text class="id_card_2">{{user_info.phone_no}}</text>
					</view>
					<view class="member_phone flex justify-between">
						<view class="member_phone_1">
							<text class="member_phone_1_1">身份证：</text>
							<text class="member_phone_1_2" v-if="user_info.id_card_no">{{user_info.id_card_no}}</text>
							<text class="member_phone_1_2" v-else>暂无</text>
						</view>
						<view class="member_phone_2 flex align-center justify-center">
							<template v-if="user_info.is_auth == 0">
								<image :src='STATIC_URL+"270.png"' mode="aspectFill"></image>
								<text>未认证</text>
							</template>
							<template v-else>
								<image :src='STATIC_URL+"271.png"' mode="aspectFill"></image>
								<text>已认证</text>
							</template>
						</view>
					</view>
				</view>
				
				<view class="guarantee">
					<view class="guarantee_title">车行保障</view>
					<view class="guarantee_content">
						<view class="service_title">
							<view class="title_1">
								服务内容
							</view>
							<view class="title_2">
								车损保障
							</view>
							<view class="title_2">
								三者保障
							</view>
							<view class="title_2">
								免折旧费
							</view>
							<view class="title_2">
								停运费
							</view>
							<view class="title_3">
								选择服务
							</view>
						</view>
						<view class="service_list">
							<scroll-view class="service_scroll" scroll-x="true">
								<view class="service_item service_item_active">
									<view class="item_1">
										<image :src='insureItem.image' mode="aspectFill"></image>
										<view class="">{{insureItem.name}}</view>
									</view>
									<view class="item_2">
										{{insureItem.start_paid_amount_text}}
									</view>
									<view class="item_2">
										{{insureItem.third_assure_amount_text}}
									</view>
									<view class="item_2">
										{{insureItem.depreciation_expense_text}}
									</view>
									<view class="item_2">
										<!-- <image v-if="insureItem.has_tyf == 1" :src='STATIC_URL+"233.png"' mode="aspectFill"></image>
										<image v-else :src='STATIC_URL+"232.png"' mode="aspectFill"></image> -->
										{{insureItem.park_fee_text}}
									</view>
									<view class="item_3">
										<view class="item_3_1">{{Number(insureItem.day_price)}}元/天</view>
										<view class="item_3_2">已包含</view>
									</view>
								</view>
								<view class="service_item" :class="v.isSelect == 1 ? 'service_item_active' : ''"
									v-for="(v, k) in insureList" :key="k" @tap.stop="selectInsure(k, insure_id)">
									<view class="item_1">
										<image :src='v.image' mode="aspectFill"></image>
										<view class="">{{v.name}}</view>
									</view>
									<view class="item_2">
										{{v.start_paid_amount_text}}
									</view>
									<view class="item_2">
										{{v.third_assure_amount_text}}
									</view>
									<view class="item_2">
										{{v.depreciation_expense_text}}
									</view>
									<view class="item_2">
										<!-- <image v-if="v.has_tyf == 1" :src='STATIC_URL+"233.png"' mode="aspectFill"></image>
										<image v-else :src='STATIC_URL+"232.png"' mode="aspectFill"></image> -->
										{{v.park_fee_text}}
									</view>
									<view class="item_3">
										<template v-if="v.isSelect == 1">
											<view class="item_3_1">{{Number(v.day_price)}}元/天</view>
											<view class="item_3_2">已购买</view>
										</template>
										<template v-else>
											<view class="item_3_3">{{Number(v.day_price)}}元/天</view>
											<view class="item_3_4">升级</view>
										</template>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>
				
				<!-- <view class="content_bg">
					<view class="infor_item no_line flex align-center justify-between">
						<view class="infor_item_le">保障服务</view>
					</view>
					<view class="infor_item flex align-center justify-between" style="padding: 0 0 30rpx;">
						<view class="infor_item_le_1 flex align-center">
							<text>不计免赔服务（￥50/天）</text>
							<image class="infor_item_icon" :src='STATIC_URL+"469.png"' mode="aspectFill"></image>
						</view>
						<view class="infor_item_ri_1">
							<u-switch v-model="checked" active-color="#1A66FA" size="28"></u-switch>
						</view>
					</view>
				</view> -->
				<!-- <view class="content_bg">
					<view class="infor_item no_line flex align-center justify-between">
						<view class="infor_item_le">优惠券</view>
					</view>
					<view class="infor_item flex align-center justify-between" style="padding: 0 0 30rpx;">
						<view class="infor_item_le_1 flex align-center">
							<image class="coupon_icon" :src='STATIC_URL+"470.png"' mode="aspectFill"></image>
							<text>红包/抵用券</text>
						</view>
						<view class="infor_item_ri_4">
							<text>选择优惠券</text>
							<u-icon name="arrow-right" size="24" color="#979797"></u-icon>
						</view>
					</view>
				</view> -->
				
				<view class="remarks flex align-center justify-between" @tap.stop="remarkShow=true">
					<view class="remarks_le">订单备注</view>
					<view class="remarks_ri">
						<text>填写备注</text>
						<u-icon name="arrow-right" size="24" color="#979797"></u-icon>
					</view>
				</view>
			</view>
			
			<view class="footer_btn flex align-center justify-between">
				<view class="footer_btn_2 flex align-center justify-center" @tap.stop="postGenerateOrder">确认预定</view>
			</view>
		</template>
		
		
		<view style="height: 145rpx;"></view>
		
		
		<u-popup v-model="remarkShow" mode="bottom" border-radius="28">
			<view class="screen_popup">
				<view class="screen_title flex align-center justify-between">
					<view class="">订单备注</view>
					<u-icon name="close" color="#cccccc" size="30" @click="remarkShow=false"></u-icon>
				</view>
				
				<view class='flex flex-wrap feedback_fd2_1'>
					<textarea class='flex feedback_input_fd2_1' confirm-type="done" :placeholder="'请输入内容'" :maxlength="200" placeholder-style="color:rgba(191, 191, 191, 1);font-size:30rpx" v-model="body" />
					<text class="feedback_num">{{body.length}}/200</text>
				</view>
				
				<!-- <view class="second_title">基础标签</view>
				<view class="screen_list">
					<view class="screen_item flex align-center justify-center active_item">近一周</view>
					<view class="screen_item flex align-center justify-center">近一月</view>
				</view>
				
				<view class="second_title">服务标签</view>
				<view class="screen_list">
					<view class="screen_item flex align-center justify-center active_item">近一周</view>
					<view class="screen_item flex align-center justify-center">近一月</view>
				</view>
				<view class="second_title">渠道标签</view>
				<view class="screen_list">
					<view class="screen_item flex align-center justify-center active_item">近一周</view>
					<view class="screen_item flex align-center justify-center">近一月</view>
				</view> -->
				<view class="picker_btn flex align-center justify-between">
					<view class="picker_btn_1 flex align-center justify-center" @tap.stop="cancelRemarks">重置</view>
					<view class="picker_btn_2 flex align-center justify-center" @tap.stop="remarksOk">确定</view>
				</view>
			</view>
		</u-popup>
		
	</view>
</template>
<script>
	import UploadImage from '@/common/utils/upload-image.js'
	import {
		validate
	} from '@/common/utils/validate.js'
	export default {
		components: {},

		data() {
			return {
				isShow: true,
				checked: false,
				remarkShow: false,
				body: "",
				markDays: [],
				timeData: {},
				carInfo: {},
				user_info: {},
				insureList: [],
				totalPrice: 0,
				user_id: "",
				store_id: "",
				car_id: "",
				real_car_id: "",
				door_to_door: "1",  // 1到店取车  2送车上门
				changeInsure: "",
				insureItem: "",
				insure_id: "",
				is_submit: false,
				
				otaName: "", // ota平台
			};
		},
		computed: {
			
		},
		watch: {},
		onLoad(options) {
			let {
				user_id,
				store_id,
				car_id,
				door_to_door,
				real_car_id
			} = options;
			if (user_id !== undefined) this.user_id = user_id;
			if (store_id !== undefined) this.store_id = store_id;
			if (car_id !== undefined) this.car_id = car_id;
			if (real_car_id !== undefined) this.real_car_id = real_car_id;
			if (door_to_door !== undefined) this.door_to_door = door_to_door;
			this.timeData = global.timeData;
			// console.log(this.timeData);
			this.getdiffdate((this.timeData.toDay).slice(0, 10), (this.timeData.twoDay).slice(0, 10));
			this.getCarInsure();
			uni.$on('changeTime', res => {
				this.timeData = global.timeData;
				this.getdiffdate((this.timeData.toDay).slice(0, 10), (this.timeData.twoDay).slice(0, 10));
				this.getOrderInfo();
			})
			if (uni.getStorageSync('ota')) {
				let otaList = uni.getStorageSync('ota');
				let otaItem = otaList.find(item => {
					return item.id == global.ota_id;
				})
				if (otaItem) {
					this.otaName = otaItem.name;
				} else {
					this.otaName = "";
				}
			}
		},
		onUnload() {
			uni.$off('changeTime');
		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			// 生成订单   generateOrderTwo
			postGenerateOrder() {
				if (this.is_submit) return;
				this.is_submit = true;
				uni.showLoading({
					title: '下单中'
				})
				this.$api.post(global.apiUrls.generateOrderTwo, {
					user_id: this.user_id,
					real_car_id: this.carInfo.real_car_id,
					store_id: this.store_id,
					take_at: this.timeData.toDay,
					repay_at: this.timeData.twoDay,
					door_to_door: this.door_to_door, //:0=到店取车,1=上门送车
					is_free_deposit: 1, // 是否免押金不能为空:1=不免押,2=免押
					type: 0, // 订单类型:0=普通订单,1=优惠劵
					free_deposit_type: 1, // 免押类型:1=到店免押,2=其他
					insure_plus_id: this.changeInsure ? this.changeInsure.id : "",
					from: global.ota_id
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						uni.hideLoading();
						this.$message.info(res.data.info);
						if (this.body) {
							// global.order_id = res.data.data.order_id;
							// global.logMsg = this.body;
							// getApp().recordLogs();
							this.addRemark(res.data.data.order_id);
						}
						setTimeout(() => {
							// uni.redirectTo({
							// 	url: '/pages/order/cashier?order_id=' + res.data.data.order_id
							// })
							global.ota_id = "";
							uni.redirectTo({
								url: '/pages/order/details?order_id=' + res.data.data.order_id
							})
						}, 800)
					} else {
						uni.hideLoading();
						this.$message.info(res.data.info);
						this.is_submit = false;
					}
				}).catch(err => {
					this.is_submit = false;
					uni.hideLoading();
				})
			},
			// 订单添加备注
			addRemark(order_id) {
				this.$api.post(global.apiUrls.changeOrderRemark, {
					order_id: order_id,
					remark: this.body
				}).then(res => {
					if (res.data.code == 1) {
						
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			// 下单数据
			getOrderInfo() {
				this.$api.post(global.apiUrls.renewalMergeOrder, {
					start_time: this.timeData.toDay,
					end_time: this.timeData.twoDay,
					store_id: this.store_id,
					car_id: this.car_id,
					door_to_door: this.door_to_door,
					user_id: this.user_id,
					real_car_id: this.real_car_id,
					insure_plus_id: this.changeInsure ? this.changeInsure.id : ""
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					uni.hideLoading();
					if (res.data.code == 1) {
						this.carInfo = res.data.data;
						this.user_info = res.data.data.user_info;
						this.getPrice();
					} else if (res.data.code == -1) {
						this.$message.info(res.data.info);
						setTimeout(() => {
							uni.navigateBack();
						}, 800)
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			// 车辆保障数据列表  postCarInsure
			getCarInsure() {
				this.$api.post(global.apiUrls.postEnhancedService, {
					car_id: this.car_id,
					store_id: this.store_id
				}).then(res => {
					// console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.insureList = res.data.data;
						this.insureItem = "";
						let index = "";
						if (this.insureList.length > 0) {
							this.insureList.forEach((v, k) => {
								v.isSelect = 0;
								if (v.service_type == 1) {
									this.insureItem = v;
									index = k;
								}
							})
						}
						this.insureList.splice(index, 1);
						this.getOrderInfo();
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			selectInsure(index, id) {
				if (this.insureList[index].isSelect == 0) {
					this.insureList.forEach((v, k) => {
						v.isSelect = 0;
					})
					this.insureList[index].isSelect = 1;
					this.insureIndex = index;
					this.insure_id = id;
					this.changeInsure = this.insureList[index];
				} else {
					this.insureList[index].isSelect = 0;
					this.insureIndex = -1;
					this.insure_id = "";
					this.changeInsure = "";
				}
				this.$forceUpdate();
				uni.showLoading({
					title: '计算中'
				})
				this.getOrderInfo();
			},
			
			getPrice() {
				this.totalPrice = Number(this.carInfo.base_price) + Number(this.carInfo.insurance_money) + Number(this.carInfo.insure_plus_money) - Number(this.carInfo.new_person_price);
			},
			// 计算显示的服务费
			serviceCount(price, type) {
				// 1基础保障服务费  2升级保障服务费
				let countPrice = Number(price);
				let resultPrice = 0;
				if (this.timeData.dayNum == 0) {
					if (type == 1) {
						resultPrice = countPrice;
					} else {
						if (this.timeData.dayHours == 0) {
							resultPrice = countPrice * this.timeData.dayNum;
						} else {
							if (this.timeData.dayHours < 4 && this.timeData.dayHours > 0) {
								resultPrice = countPrice / 2;
							} else {
								resultPrice = countPrice;
							}
						}
					}
				} else {
					if (this.timeData.dayHours == 0) {
						resultPrice = countPrice * this.timeData.dayNum;
					} else {
						if (this.timeData.dayHours < 4 && this.timeData.dayHours > 0) {
							resultPrice = (countPrice / 2) + countPrice * this.timeData.dayNum;
						} else {
							resultPrice = countPrice * (this.timeData.dayNum + 1);
						}
					}
				}
				return resultPrice;
			},
			remarksOk() {
				if (!this.body) {
					this.$message.info('请输入备注内容');
					return;
				}
				this.remarkShow = false;
			},
			cancelRemarks() {
				this.body = "";
				this.remarkShow = false;
			},
			getdiffdate(stime, etime) {
				//初始化日期列表，数组
				var diffdate = new Array();
				var i = 0;
				//开始日期小于等于结束日期,并循环
				while (stime <= etime) {
					diffdate[i] = stime;
			
					//获取开始日期时间戳
					var stime_ts = new Date(stime).getTime();
					// console.log('当前日期：'+stime   +'当前时间戳：'+stime_ts);
			
					//增加一天时间戳后的日期
					var next_date = stime_ts + (24 * 60 * 60 * 1000);
			
					//拼接年月日，这里的月份会返回（0-11），所以要+1
					var next_dates_y = new Date(next_date).getFullYear() + '-';
					var next_dates_m = (new Date(next_date).getMonth() + 1 < 10) ? '0' + (new Date(next_date).getMonth() +
						1) + '-' : (new Date(next_date).getMonth() + 1) + '-';
					var next_dates_d = (new Date(next_date).getDate() < 10) ? '0' + new Date(next_date).getDate() :
						new Date(next_date).getDate();
			
					stime = next_dates_y + next_dates_m + next_dates_d;
			
					//增加数组key
					i++;
				}
				this.markDays = diffdate
				// console.log(diffdate);
			}
		}
	};
</script>
<style lang="scss" scoped>
	.guarantee {
		background: #fff;
		border-radius: 16rpx;
		margin: 20rpx 0;
		padding: 24rpx 20rpx;
	
		.guarantee_title {
			font-weight: bold;
			font-size: 30rpx;
			color: #111111;
			margin-bottom: 20rpx;
		}
	
		.guarantee_content {
			background: linear-gradient(90deg, #FFF8F5 0%, #FFFFFF 21%);
			border: 2rpx solid transparent;
			border-radius: 16rpx;
			background-clip: padding-box, border-box;
			background-origin: padding-box, border-box;
			background-image: linear-gradient(90deg, #FFF8F5 0%, #FFFFFF 21%), linear-gradient(270deg, rgba(247, 247, 247, 1), rgba(246, 247, 251, 1));
			display: flex;
	
			.service_title {
				width: 140rpx;
	
				.title_1 {
					width: 140rpx;
					height: 160rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					font-size: 22rpx;
					color: #666666;
					padding: 8rpx;
					border-bottom: 2rpx solid #eee;
				}
	
				.title_2 {
					width: 140rpx;
					height: 120rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					font-size: 22rpx;
					color: #666666;
					padding: 8rpx;
				}
	
				.title_3 {
					width: 140rpx;
					height: 160rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: 500;
					font-size: 26rpx;
					color: #111111;
					padding: 8rpx;
					border-top: 2rpx solid #eee;
				}
			}
	
			.service_list {
				width: calc(100% - 140rpx);
	
				.service_scroll {
					white-space: nowrap;
				}
	
				.service_item {
					display: inline-block;
					width: 172rpx;
	
					.item_1 {
						height: 158rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						border-bottom: 2rpx solid #eee;
						padding: 8rpx;
						text-align: center;
						white-space: normal;
	
						image {
							width: 52rpx;
							height: 52rpx;
						}
	
						view {
							font-weight: bold;
							font-size: 22rpx;
							color: #000000;
						}
					}
	
					.item_2 {
						font-size: 22rpx;
						color: #111111;
						height: 120rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						padding: 8rpx;
						text-align: center;
						white-space: normal;
	
						image {
							width: 32rpx;
							height: 32rpx;
						}
					}
	
					.item_3 {
						height: 158rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						padding: 8rpx;
						text-align: center;
						border-top: 2rpx solid #eee;
	
						.item_3_1 {
							font-weight: bold;
							font-size: 22rpx;
							color: #000000;
						}
	
						.item_3_2 {
							margin-top: 8rpx;
							font-weight: 400;
							font-size: 22rpx;
							color: #1A66FA;
							width: 92rpx;
							height: 40rpx;
						}
	
						.item_3_3 {
							font-weight: bold;
							font-size: 22rpx;
							color: #1A66FA;
						}
	
						.item_3_4 {
							margin-top: 8rpx;
							width: 92rpx;
							height: 40rpx;
							background: #1A66FA;
							border-radius: 38rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-weight: 400;
							font-size: 22rpx;
							color: #FFFFFF;
						}
					}
				}
	
				.service_item_active {
					border: 2rpx solid transparent;
					border-radius: 16rpx;
					background-clip: padding-box, border-box;
					background-origin: padding-box, border-box;
					background-image: linear-gradient(to right, rgba(246, 247, 251, 1), rgba(246, 247, 251, 1)), linear-gradient(90deg, rgba(26, 102, 250, 1), rgba(26, 102, 250, 0.8));
				}
			}
		}
	}
	.screen_popup {
		.screen_title {
			padding: 30rpx 30rpx 30rpx 30rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #222222;
			border-bottom: 1px solid #eee;
		}
		.second_title {
			padding: 0 30rpx;
			margin: 32rpx 0 24rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
		}
		.screen_list {
			overflow: hidden;
			padding: 0 30rpx;
			.screen_item {
				float: left;
				margin-right: 12rpx;
				margin-bottom: 12rpx;
				width: 164rpx;
				height: 80rpx;
				background: #F6F7FB;
				border-radius: 16rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				border: 2rpx solid #F6F7FB;
			}
			.active_item {
				background: #F1F6FF;
				border: 2rpx solid #AAC7FF;
				color: #1A66FA;
			}
			.screen_item:nth-child(4n+4) {
				margin-right: 0;
			}
		}
		.screen_date {
			width: 692rpx;
			height: 80rpx;
			border-radius: 16rpx;
			border: 2rpx solid #EEEEEE;
			margin: 0 30rpx;
			padding-left: 46rpx;
			.date_icon {
				width: 40rpx;
				height: 40rpx;
			}
			.date_content {
				margin-left: 54rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
				.date_content_line {
					margin: 0 86rpx;
				}
			}
		}
		.picker_btn {
			background: #fff;
			padding: 12rpx 30rpx 28rpx;
			margin-top: 12rpx;
			border-top: 1px solid #eee;
		}
		.picker_btn_1 {
			width: 236rpx;
			height: 96rpx;
			background: #F6F7FB;
			border-radius: 16rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
		}
		.picker_btn_2 {
			width: 436rpx;
			height: 96rpx;
			background: #1A66FA;
			border-radius: 16rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #fff;
		}
		.feedback_fd2_1 {
			background: #f6f7fb;
			border-radius: 8rpx;
			margin: 30rpx 30rpx 0;
			font-size: 26rpx;
			position: relative;
		}
		.feedback_input_fd2_1 {
			padding: 32rpx 34rpx 60rpx 34rpx;
			width: 100%;
			height: 290rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #222;
		}
		.feedback_num {
			font-weight: 500;
			font-size: 26rpx;
			color: rgba(23,19,19,0.4);
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
		}
	}
	.page_content {
		padding: 24rpx 24rpx 0;
		.card_no {
			.card_no_text {
				font-weight: bold;
				font-size: 44rpx;
				color: #FFFFFF;
				.ota_name {
					float: left;
					margin-left: 12rpx;
					font-size: 22rpx;
					min-width: 110rpx;
					height: 40rpx;
					transform: skewX(-8deg);
					background: #fff;
					color: #1A66FA;
					font-weight: 400;
					border-radius: 9rpx;
					
					.ota_name_text {
						transform: skewX(8deg);
					}
				}
			}
			.order_source {
				width: 90rpx;
				height: 40rpx;
				margin-left: 16rpx;
			}
			.order_status {
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
				padding-right: 24rpx;
			}
		}
		.label_info {
			margin-top: 12rpx;
			.label_list {
				margin-top: 14rpx;
				overflow: hidden;
				.label_item {
					float: left;
					padding: 4rpx 20rpx;
					margin: 0 12rpx 0rpx 0;
					border-radius: 8rpx;
					font-weight: 400;
					font-size: 22rpx;
					color: #fff;
					border: 1px solid rgba(255,255,255,0.4);
				}
			}
			.price_le {
				.price_le_1 {
					font-size: 24rpx;
					color: #fff;
				}
				.price_le_2 {
					font-size: 24rpx;
					font-weight: bold;
					color: #fff;
				}
				.price_le_3 {
					font-size: 34rpx;
					font-weight: bold;
					color: #fff;
				}
				.price_le_4 {
					font-size: 24rpx;
					font-weight: bold;
					color: #fff;
				}
			}
		}
		.order_date {
			margin-top: 32rpx;
			padding: 32rpx 24rpx;
			background: rgba(255,255,255,0.14);
			border-radius: 16rpx;
			.date_item {
				.date_item_1 {
					font-weight: 400;
					font-size: 24rpx;
					color: #FFFFFF;
				}
				.date_item_2 {
					margin-top: 12rpx;
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;
				}
			}
			.date_ce {
				text-align: center;
				.date_ce_1 {
					width: 192rpx;
					height: 10rpx;
				}
				.date_ce_2 {
					font-weight: bold;
					font-size: 30rpx;
					color: #FFFFFF;
					margin-top: 22rpx;
				}
			}
		}
		.order_date_status {
			margin-top: 16rpx;
			padding: 32rpx 24rpx;
			background: #fff;
			border-radius: 16rpx;
			.date_item_status {
				.date_item_status_1 {
					font-weight: 400;
					font-size: 24rpx;
					color: #111;
				}
				.date_item_status_2 {
					margin-top: 12rpx;
					font-weight: bold;
					font-size: 36rpx;
					color: #111;
				}
			}
			.date_ce_status {
				text-align: center;
				.date_ce_status_1 {
					width: 192rpx;
					height: 10rpx;
				}
				.date_ce_status_2 {
					font-weight: bold;
					font-size: 30rpx;
					color: #111;
					margin-top: 22rpx;
				}
			}
			.no_cars {
				font-weight: bold;
				font-size: 36rpx;
				color: #CCCCCC;
			}
		}
		.reserve_info {
			margin-top: 24rpx;
			width: 100%;
			height: 168rpx;
			background: url(https://speed.zhongchuxing.com/gjdimages/468.png) no-repeat;
			background-size: 100% 100%;
			padding: 36rpx 24rpx 0;
			.reserve_item {
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
			}
		}
		.content_bg {
			background: #fff;
			border-radius: 16rpx;
			margin-top: 16rpx;
			padding: 0 24rpx;
		}
		.infor_item {
			padding: 30rpx 0;
			border-bottom: 1px solid #eee;
			.infor_item_le {
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}
			.infor_item_le_1 {
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
			}
			.infor_item_ri {
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
			}
			.infor_item_ri_1 {
				font-weight: bold;
				font-size: 24rpx;
				color: #222222;
			}
			.infor_item_ri_2 {
				font-weight: 400;
				font-size: 28rpx;
				color: #1A66FA;
			}
			.infor_item_ri_3 {
				font-weight: bold;
				font-size: 24rpx;
				color: #FF532E;
			}
			.infor_item_ri_4 {
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
			}
			.infor_item_icon {
				width: 38rpx;
				height: 38rpx;
				margin-left: 10rpx;
			}
			.coupon_icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
			}
		}
		.preferential {
			padding: 30rpx 0;
			.preferential_le {
				font-weight: 400;
				font-size: 24rpx;
				color: rgba(0,0,0,0.6);
			}
			.preferential_ri {
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
			}
		}
		.id_card {
			padding: 0 0 24rpx;
			font-weight: 400;
			font-size: 28rpx;
			.id_card_1 {
				color: rgba(0,0,0,0.6);
			}
			.id_card_2 {
				color: rgba(0,0,0,0.8);
			}
		}
		.member_phone {
			padding: 0 0 24rpx;
			.member_phone_1 {
				font-weight: 400;
				font-size: 28rpx;
				.member_phone_1_1 {
					color: rgba(0,0,0,0.6);
				}
				.member_phone_1_2 {
					color: rgba(0,0,0,0.8);
				}
			}
			.member_phone_2 {
				font-weight: 400;
				font-size: 28rpx;
				color: #1A66FA;
				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
				}
			}
		}
		.coupon_item {
			padding-bottom: 30rpx;
			.coupon_item_1 {
				font-weight: 400;
				font-size: 28rpx;
				color: rgba(0,0,0,0.6);
			}
			.coupon_item_2 {
				font-weight: 500;
				font-size: 28rpx;
				color: rgba(0,0,0,0.8);
			}
		}
		.remarks {
			background: #fff;
			border-radius: 16rpx;
			margin-top: 16rpx;
			padding: 32rpx 24rpx;
			.remarks_le {
				font-weight: 500;
				font-size: 28rpx;
				color: #000000;
			}
			.remarks_ri {
				font-weight: 400;
				font-size: 28rpx;
				color: #999999;
			}
			.remarks_ri_1 {
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
			}
		}
		.no_line {
			border-bottom: 0;
		}
	}
	.footer_btn {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		background: #fff;
		padding: 12rpx 30rpx 28rpx;
		z-index: 10;
	}
	.footer_btn_2 {
		width: 702rpx;
		height: 96rpx;
		background: #1A66FA;
		border-radius: 16rpx;
		font-weight: 500;
		font-size: 30rpx;
		color: #fff;
	}
	.page_footer {
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 112rpx;
		padding: 0 64rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #222222;
	}

	.personalInformation_picker2_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		background-size: 100% !important;
		padding: 0rpx 32rpx 0rpx 32rpx;
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		background-size: 100% auto !important;
		height: 100rpx;
	}

	.personalInformation_picker2_0_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #BFBFBF;
	}

	.personalInformation_picker2_0_c1 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
	}

	.personalInformation_picker2_0_c2 {
		color: rgba(44, 143, 255, 1);
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
	}

	.personalInformation_fd1_0 {
		// margin-top: 32rpx;
		height: 96rpx;
		border-top: 1px solid #eee;
	}

	.personalInformation_fd1_0_c0 {
		font-weight: 400;
		font-size: 28rpx;
		color: rgba(0,0,0,0.6);
	}

	.personalInformation_fd1_0_c1_image {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
	}

	.personalInformation_fd1_1 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_1_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_1_c1 {
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		text-align: right;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.personalInformation_fd1_2 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_2_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_2_c1 {
		font-size: 32rpx;
		font-weight: 400;
		color: #333;
		text-align: right;
		margin: 0rpx 0rpx 0rpx 24rpx;
	}

	.personalInformation_fd1_3 {
		border-bottom: 1px solid #eee;
		height: 109rpx;
	}

	.personalInformation_fd1_3_c0 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
	}

	.personalInformation_fd1_3_c1 {
		font-weight: 500;
		font-size: 28rpx;
		color: rgba(0,0,0,0.8);
	}

	.personalInformation_flex_1 {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx 24rpx 0rpx 24rpx;
		margin: 16rpx 24rpx 0;
	}

	.personalInformation_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		height: 88rpx;
	}

	.personalInformation_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #fff;
	}

	.personalInformation_fd0_0_c1 {
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
	}

	.personalInformation_fd0_0_c2 {
		width: 36rpx;
		height: 36rpx;
	}

	.personalInformation_flex_0 {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background: url(https://speed.zhongchuxing.com/gjdimages/466.png) no-repeat;
		background-size: 100% auto !important;
	}

	.page {
		min-height: calc(100vh - var(--window-bottom));
		background: url(https://speed.zhongchuxing.com/gjdimages/466.png) no-repeat #f6f7fb;
		background-size: 100% auto !important;
	}
</style>